<template>
<el-dialog class="dialog-amount-detail" title="明细" :visible.sync="amountVisible" :close-on-click-modal="false" :close-on-press-escape="false" width="346px">
    <div class="wrapper-amount">
        <el-row>
            <el-col :span="8" class="label">支付时间:</el-col>
            <el-col :span="16" class="text">{{data.createDate}}</el-col>
        </el-row>
        <el-row>
            <el-col :span="8" class="label">支付渠道:</el-col>
            <el-col :span="16" class="text">
                <span v-if="data.modeMode == 1">余额支付</span>
                <span v-if="data.modeMode == 2">微信支付</span>
                <span v-if="data.modeMode == 3">支付宝支付</span>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="8" class="label">流水号:</el-col>
            <el-col :span="16" class="text">{{data.flowCode}}</el-col>
        </el-row>
        <el-row>
            <el-col :span="8" class="label">支付金额:</el-col>
            <el-col :span="16" class="text">{{data.paidAmount}}</el-col>
        </el-row>
    </div>
</el-dialog>
</template>

<script>
export default {
  props: ['data'],
  data () {
    return {
      amountVisible: false
    }
  },
  methods: {
    init () {
      this.amountVisible = true
      const balanceAmount = this.data.balanceAmount ? this.data.balanceAmount : 0
      const realAmount = this.data.realAmount ? this.data.realAmount : 0
      this.data.paidAmount = balanceAmount + realAmount
    }
  }
}
</script>

<style lang="scss">
.dialog-amount-detail {
    .el-dialog__header {
        border-bottom: 1px solid #EEEEEE;

        .el-dialog__title {
            font-weight: 500;
        }
    }

    .el-dialog__body {
        padding-top: 0 !important;
        background-color: #fff;

        .wrapper-amount {
            margin: 0 20px;
            padding-top: 16px;
            padding-bottom: 20px;

            &:not(:last-child) {
                border-bottom: 1px solid #eeeeee;
            }

            .el-row:not(:last-child) {
                margin-bottom: 16px;

                .label {
                    color: #999999;
                }

            }

            .text {
                font-weight: 600;
            }
        }
    }

}
</style>
